<template>
  <el-dialog
    v-if="dialogVisible"
    :close-on-click-modal="false"
    title="标签设置"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    @close="closeDialog"
    width="668px"
  >
    <div class="label-box">

        <div class="left-label">
            <div class="left-header"><el-input placeholder="输入关键词搜索分组" v-model="searchgrouping" @input="searchList" suffix-icon="el-icon-search" style="height: 32px;"></el-input></div>
            <div class="grouping-list">
                    <el-popover
                        placement="bottom"
                        title="添加分组"
                        width="308"
                        trigger="manual"
                        v-model="visible">
                        <div> 
                            <el-input type="text" placeholder="请输入标签名称" v-model="addTagForm.name"  @input="handleInput"  show-word-limit></el-input>
                            <div class="add-tag">
                                <el-button size="small" @click="resetTag" class="el-button-width">取消</el-button>
                                <el-button size="small" type="primary" @click="submitGroup" :disabled="loading_s" :loading="loading_s" class="el-button-width">确定</el-button>
                            </div>
                        </div>
                        <div slot="reference" @click="visible = !visible,addTagForm.name = ''" class="addgrouping"><div>+</div>添加新分组</div>
                    </el-popover>
                        <div class="grouping-item" :class="{'grouping-item-active':pid == item.id}" v-for="item in taglist"  :key="item.id"  @click="selectTag(item),inputValue = ''">
                            <p>{{ item.name }}</p>
                            <p>{{ item.next.length }}标签</p>
                            <div class="select-tips" v-if="item.next.length > 0 && selectTagtips(item) > 0">{{ selectTagtips(item) }}</div>
                        </div>
            </div>
        </div>

        <div class="line"></div>

        <div class="right-label"  v-loading="loadingtag">
            <template v-if="taglist.length > 0"> 
            <div class="right-header">
                <el-popover
                    popper-class="fj_popover"
                    placement="bottom"
                    width="269"
                    trigger="manual"
                    v-model="addvisible">
                    <p class="item_title flexbox flexbetween flexcenter" v-for="item in filterTagchild(inputValue)" @click="selectTagchild(item),addvisible=false,inputValue=''">
                        {{item.name}}
                        <svg v-if="item.select_flag" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M6.40805 9.85655C6.55078 9.99928 6.7822 9.99928 6.92493 9.85653L12.3232 4.4577C12.5835 4.19735 13.0056 4.19726 13.266 4.45751C13.5266 4.71788 13.5266 5.14019 13.2662 5.40065L7.0453 11.6215C6.83609 11.8307 6.4969 11.8307 6.28769 11.6215L2.89516 8.229C2.63485 7.96869 2.63485 7.54664 2.89516 7.28633C3.15547 7.02602 3.57752 7.02602 3.83783 7.28633L6.40805 9.85655Z" fill="#165DFF"/>
                        </svg>
                    </p>
                    <div class="item_title" style="background:#F8F8F9" @click="handleEnter" v-if="newBtn">新建标签 <span class="new_tag">{{inputValue}}</span></div>
                    <div slot="reference" class="flexbox flexbetween">
                        <el-input  placeholder="可搜索或回车新建标签"  v-model="inputValue" @input="handleInput('inputValue')" @keydown.enter.native="handleEnter"></el-input>
                        <el-tooltip class="item" content="删除标签" placement="top">
                            <div class="flexbox flexcenter del_icon" @click="edit_del = !edit_del" :class="{'del_icon_active':edit_del}">
                                <img src="@/assets/img/del_icon5.svg" alt="" v-if="!edit_del">
                                <img src="@/assets/img/del_icon4.svg" alt="" v-else>
                            </div>
                        </el-tooltip>
                    </div>

                </el-popover>
            </div>
            <div class="tag-list">
                <template v-if="tagchild.length > 0">
                <div class="tag-item " v-for="(item,index) in tagchild"  :class="{'tag-item-active':formattag.includes(item.id)}" :key="index" @click="selectTagchild(item)">
                    <p>{{ item.name }}<i class="el-icon-close" v-if="edit_del" @click="curItem=item,deldialogVisible = true"></i></p>
                </div>
                </template>
                <div v-else style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;"> 
                    <img src="../../assets/img/tabnull.svg" alt="">
                    <div style="font-size:12px;color:#616C85;">暂无标签，请在上方入口添加标签。</div>
                </div>
            </div>
            </template>
            <div v-else>
                <div  style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;"> 
                    <img src="../../assets/img/tabnull.svg" alt="">
                    <div style="font-size:12px;color:#616C85;">请先添加分组后，再设置标签</div>
                </div>
            </div>
        </div>
    </div>

    <div slot="footer" class="dialog-footer">
            <div class="footer-box">
                <div class="footer-left">
                    <span>已选标签：</span>
                    <div class="ellipsis">
                        <div v-for="(item,index) in tagpid" style="display: inline-block;">
                            <span>{{ item.name}}<span v-if="tagpid.length-1 != index">、</span></span>
                        </div>
                    </div>
                </div>
                <div style="flex-shrink: 0;">
                    <el-button size="small" @click="closeDialog" class="el-button-width">取 消</el-button>
                    <el-button size="small" type="primary" @click="submitForm" :disabled="loading" :loading="loading" class="el-button-width">保 存</el-button>
                </div>
            </div>
    </div>
    <SumbitDialog 
        class="deldialog"
        width="400px"
        :dialogVisible.sync="deldialogVisible"
        sumbitColor="#F53F3F"
        sumbitText="确定删除"
        @onSubmit="del_Tag">
        <svg slot="title" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4136 4.86706C15.3549 3.04431 12.6451 3.04431 11.5864 4.86706L3.85967 18.17C2.82129 19.9577 4.15529 22.1667 6.27331 22.1667H21.7267C23.8447 22.1667 25.1787 19.9577 24.1403 18.17L16.4136 4.86706ZM14 8.16667C13.4201 8.16667 12.95 8.63096 12.95 9.2037V15.4259C12.95 15.9987 13.4201 16.463 14 16.463C14.5799 16.463 15.05 15.9987 15.05 15.4259V9.2037C15.05 8.63096 14.5799 8.16667 14 8.16667ZM14 17.5C13.4201 17.5 12.95 17.9643 12.95 18.537C12.95 19.1098 13.4201 19.5741 14 19.5741C14.5799 19.5741 15.05 19.1098 15.05 18.537C15.05 17.9643 14.5799 17.5 14 17.5Z" fill="#F53F3F"/>
        </svg>
        <div class="dioalog_text" style="margin:20px 0">确认要删除标签吗？删除后将无法恢复！</div>
    </SumbitDialog>
  </el-dialog>
</template>

<script>
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
  props: ["taglist","ModuleName"],
  data() {
    return {
      deldialogVisible:false,
      loading_s:false,
      loading:false,
      loadingtag:false,
      inputValue:'',
      addvisible:false,
      searchgrouping:'',
      dialogVisible: false,
      visible:false,
      pid:'',
      name:'',
      addMaterialTagForm: {
            id: "",
            tag: [],
      },
      source_type:null,
      videoId:[],
      tagchild:[],
      tagpid:[],
      addTagForm:{
        name:""
      },
      edit_del:false,
      curItem:""
    };
  },
  watch:{
    inputValue(newdata,olddata){
       this.addvisible = newdata ?true:false;
        // if(newdata){
        //     this.addvisible= true;
        // }else{
        //     this.addvisible= false;
        // }
    }
  },
  computed:{
    newBtn(){
        let arr = this.filterTagchild(this.inputValue);
        let i = arr.findIndex(e=>e.name == this.inputValue)
        
        return i == '-1' ? true : false;
    },
    formattag(){
          return this.tagpid.map(e=> e.id)
    },
    selectTagtips(){
        return (e)=>{
            let arr = 0;
            e.next.forEach(element => {
                this.tagpid.forEach(item =>{
                    if(item.id == element.id){
                        arr++
                    }
                })
            });
        return arr
        }
    }
  },
  methods: {
    del_Tag(){
        this.delTag(this.curItem)
    },
    async delTag(item){
        let url = 'adminapi/Materialfj/tagDelete';
        if(['fenjin','Storyboard','Storyboard2','fenjinsingle','fenjinUpload'].includes(this.ModuleName)){
        }else{
            url = 'adminapi/Material/tagDelete';
        }
         const { data: res } = await this.$http.post( url,{id:item.id});
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                const existingIndex = this.tagpid.findIndex(e => e.id === item.id);
                if (existingIndex !== -1) {
                    // 如果已存在，从数组中删除
                    this.tagpid.splice(existingIndex, 1);
                }
                if(this.ModuleName == 'Storyboard'){
                        this.$parent.$parent.$parent.$parent.$parent.getTagList(this.searchgrouping).then(res=>{
                            this.taglist.forEach((e,i)=>{
                                if(this.pid == e.id){
                                    this.tagchild = e.next;
                                }
                            })
                        })
                    }else if(this.ModuleName == 'fenjinUpload'){
                        this.$parent.$parent.getTagList(this.searchgrouping).then(res=>{
                            this.taglist.forEach((e,i)=>{
                                if(this.pid == e.id){
                                    this.tagchild = e.next;
                                }
                            })
                        })
                    }else if(this.ModuleName == 'Storyboard2'){
                        this.$parent.$parent.getTagList(this.searchgrouping).then(res=>{
                            this.taglist.forEach((e,i)=>{
                                if(this.pid == e.id){
                                    this.tagchild = e.next;
                                }
                            })
                        })
                    }else{
                        this.$parent.getTagList(this.searchgrouping).then(res=>{
                            this.taglist.forEach((e,i)=>{
                                if(this.pid == e.id){
                                    this.tagchild = e.next;
                                }
                            })
                        })
                    }
                    this.deldialogVisible = false;
                    this.$message.success(res.msg);
            }
    },
    filterTagchild(searchQuery){
        let  arr = this.tagchild.filter(tag => {
        // 这里使用toLowerCase和includes实现不区分大小写的模糊搜索  
        return tag.name.toLowerCase().includes(searchQuery.toLowerCase());  
      }); 
       arr.forEach(tag => {  
        tag.select_flag = this.tagpid.map(e=>e.id).includes(tag.id);  
      });
        if(this.addvisible){
            return arr;
        }else{
            return [];
        }
    },
    searchList(){
         if(this.ModuleName == 'Storyboard'){
                this.$parent.$parent.$parent.$parent.$parent.getTagList(this.searchgrouping)
            }else if(this.ModuleName == 'fenjinUpload'){
                this.$parent.$parent.getTagList(this.searchgrouping)
            }else if(this.ModuleName == 'Storyboard2'){
                this.$parent.$parent.getTagList(this.searchgrouping)
            }else{
                this.$parent.getTagList(this.searchgrouping)
            }
    },
    handleInput(name){
        if(name == 'inputValue'){
            this.inputValue = this.inputValue.replace(/[^\u4e00-\u9fa5\w]/g, '');
        }else{
            this.addTagForm.name = this.addTagForm.name.replace(/[^\u4e00-\u9fa5\w]/g, '');
        }
        
    },
    selectTag(item){
        console.log(item)
        this.pid = item.id
        this.name = item.name
        this.tagchild = JSON.parse(JSON.stringify(item.next))
    },
    selectTagchild(item){
        if(this.edit_del)return;
         // 查找是否已存在相同的 item
            const existingIndex = this.tagpid.findIndex(e => e.id === item.id);

            if (existingIndex !== -1) {
                // 如果已存在，从数组中删除
                this.tagpid.splice(existingIndex, 1);
            } else {
                // 如果不存在，添加到数组中
                this.tagpid.push({ pid: item.pid, name: item.name, id: item.id });
            }
  
    },
   async handleEnter(event){
    console.log(event)
        if(event.type == 'keyup'){
            if(event.isComposing || event.keyCode == 229){
                return;
            }
        }
        if(this.inputValue == '')return;
        this.loadingtag = true;
       if(!this.pid)return  this.$message({type: "error",message: "请选中分组后创建标签!",});
        let url = "/adminapi/materialv2/tagAdd"
        let params = {
            pid: this.pid, //创建分组 传0
            name: this.inputValue,
        }
         if(['fenjin','Storyboard','Storyboard2','fenjinsingle','fenjinUpload'].includes(this.ModuleName)){
            url = "/adminapi/materialfj/tagAdd"
            params = {
                pid: this.pid, //创建分组 传0
                name: this.inputValue,
                tag_type: 1
            }
         }
       const { data: res } = await this.$http.post( url,params);
            if (res.code !== 200) {
                this.loadingtag = false;
                this.$message.error(res.msg);
                return;
            } else {
                if(this.ModuleName == 'Storyboard'){
                    this.$parent.$parent.$parent.$parent.$parent.getTagList().then(e=>{
                        this.inputValue = ''
                        this.loadingtag = false;
                        this.tagchild = this.taglist.find(item => item.id == this.pid).next
                    })
                } else if(["fenjinUpload","Storyboard2"].includes(this.ModuleName)){
                    this.$parent.$parent.getTagList().then(e=>{
                        this.inputValue = ''
                        this.loadingtag = false;
                        this.tagchild = this.taglist.find(item => item.id == this.pid).next
                    })
                }else{
                    this.$parent.getTagList().then(e=>{
                        this.inputValue = ''
                        this.loadingtag = false;
                        this.tagchild = this.taglist.find(item => item.id == this.pid).next
                    })
                }
                this.$message({
                    type: "success",
                    message: res.msg,
                });
            }
            
    },
   async submitGroup(){
        this.loading_s = true;
        let url = "/adminapi/materialv2/tagAdd"
        let params = {
                pid: 0, //创建分组 传0
                name: this.addTagForm.name
            }
         if(['fenjin','Storyboard','Storyboard2','fenjinsingle','fenjinUpload'].includes(this.ModuleName)){
            url = "/adminapi/materialfj/tagAdd";
            params = {
                pid: 0, //创建分组 传0
                name: this.addTagForm.name,
                tag_type: 1
            }
         }
         const { data: res } = await this.$http.post(url,params);
            if (res.code !== 200) {
                this.$message.error(res.msg);
                 this.loading_s = false;
                return;
            } else {
                if(this.ModuleName == 'Storyboard'){
                    this.$parent.$parent.$parent.$parent.$parent.getTagList()
                }else if(this.ModuleName == 'Storyboard2'){
                    this.$parent.$parent.getTagList()
                }else if(this.ModuleName == 'fenjinUpload'){
                    this.$parent.$parent.getTagList()
                }else{
                    this.$parent.getTagList()
                }
                this.addTagForm.name = '';
                this.tagchild = [];
                this.tagpid = [];
                 this.loading_s = false;
                this.visible = false;
                this.$message({
                    type: "success",
                    message: "创建成功!",
                });
            }
        
    },
    filterTagName(){
        let m_Nmae=[],m_Sex =[],is_flag = true;
        let select_tag = this.tagpid.map(e=> e.id);
        this.taglist.forEach(e=>{
                if(['模特（内部）','模特（外部）'].includes(e.name)){
                   m_Nmae.push(...e.next.map(e=> e.id))
                }
                if('模特性别' == e.name ){
                   m_Sex = e.next.map(e=> e.id)
                }
        })
        console.log(m_Nmae)
           taglis:for (const item of select_tag) {
                if(m_Nmae.includes(item) ){
                    for (const items of select_tag) {
                        if(m_Sex.includes(items)){
                            is_flag = true
                            break taglis;
                        }else{
                            is_flag = false;
                        }
                    }
                }
            }
         return is_flag;
    },
   async submitForm(){
            if(!this.filterTagName())return this.$message.error("选择了“模特（内部）,模特（外部）”的标签则必须选择“模特性别”的标签");
            this.loading = true
            this.addMaterialTagForm.tag = this.tagpid.map(e=> e.id);
             if(this.ModuleName == 'Material'){ //视频库
                    var { data: res } = await this.$http.post(
                        "adminapi/materialv2/tagSign",
                        {...this.addMaterialTagForm,source_type:this.source_type}
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false
                        return;
                    } else {
                        this.$message({
                            message: "保存成功",
                            type: "success",
                        });
                        this.closeDialog()
                        this.loading = false
                        this.$parent.getDataList(1);
                    }
             }else if (this.ModuleName == 'Storyboard'){
                        let data = this.tagpid
                        this.closeDialog()
                        this.loading = false
                        this.$parent.$parent.$parent.$parent.$parent.GettagData(data)
             } else if (this.ModuleName == 'Storyboard2'){
                        let data = this.tagpid
                        this.closeDialog()
                        this.loading = false
                        this.$parent.$parent.GettagData(data)
             } else if (this.ModuleName == 'fenjin') { //分镜库 视频列表 批量添加标签
            let { data: res } = await this.$http.post(
                     "adminapi/Materialfj/materialEditTagAll",
                     {video_id:this.videoId,id:undefined,tag_id:this.addMaterialTagForm.tag,tag_type:1}
                 );
                 if (res.code !== 200) {
                    this.loading = false
                    this.$message.error(res.msg);
                     return;
                 } else {
                     this.$message({
                         message: "保存成功",
                         type: "success",
                     });
                     this.closeDialog()
                     this.loading = false
                     this.$parent.$refs.storyVideo.clearSelect();
                 }
             } else if (this.ModuleName == 'fenjinsingle') { //分镜库 视频列表 批量添加标签
            let { data: res } = await this.$http.post(
                     "adminapi/Materialfj/materialEditTag",
                     {video_id:this.videoId[0],id:undefined,tag_id:this.addMaterialTagForm.tag,tag_type:1}
                 );
                 if (res.code !== 200) {
                    this.loading = false
                     this.$message.error(res.msg);
                     return;
                 } else {
                     this.$message({
                         message: "保存成功",
                         type: "success",
                     });
                    this.loading = false
                     this.closeDialog()
                 }

             }  else if (this.ModuleName == 'fenjinUpload') {//分镜库 上传批量添加
                    console.log('123')
                    // let repeatArr = this.tagpid.map(e=>e.id)
                    let  data = JSON.parse(JSON.stringify(this.tagpid))
                    let   that = this;
                    this.$parent.$parent.multipleSelection.forEach(e=>{
                        for (let index = 0; index < this.$parent.$parent.tableData.length; index++) {
                            if(e.material_md5 == this.$parent.$parent.tableData[index].material_md5){
                               this.$parent.$parent.tableData[index].tag_id = [...this.$parent.$parent.tableData[index].tag_id,...data].filter((item, index, self) => {  
                                    return self.findIndex(t => t.id === item.id) === index;  
                                });
                            }
                        }
                    })
                        // this.$parent.$parent.$refs.AddInfo.addMtInfoForm.tag_id = JSON.parse(JSON.stringify(this.tagpid));
                        // this.$parent.$parent.$refs.AddInfoBulk.addMtInfoForm.tag_id = JSON.parse(JSON.stringify(this.tagpid));
                     this.$message({
                         message: "保存成功",
                         type: "success",
                     });
                     this.closeDialog()
                     this.loading = false
             } else{ //深圳排期看板 
                 let { data: res } = await this.$http.post(
                     "adminapi/Demandszv2/videoTag",
                     this.addMaterialTagForm
                 );
                 if (res.code !== 200) {
                    this.loading = false
                     this.$message.error(res.msg);
                     return;
                 } else {
                     this.$message({
                         message: "保存成功",
                         type: "success",
                     });
                     this.loading = false
                     this.closeDialog()
                     if(this.$parent.queryInfo.page){
                         this.$parent.getDataList(this.$parent.queryInfo.page);
                     }else{
                        this.$parent.getDataList(1);
                     }
                 }
             }
    },
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.inputValue= ''
      this.searchgrouping= ''
      this.pid= ''
      this.name= ''
      this.addMaterialTagForm = {id: "",tag: []}
      this.source_type= null;
      this.tagchild= []
      this.edit_del = false;
      this.tagpid = []
      this.videoId = []
      this.addTagForm = {
        name:""
      }
    },
    // 关闭重置 新增分组表单
    resetTag() {
        this.visible = false;
    },
  },
  components:{
    SumbitDialog
  }
};
</script>

<style >
    .fj_popover{
        border-radius: 8px !important;
        padding: 4px !important;
        overflow-y: auto !important;
        max-height: 500px;
    }
    .fj_popover .popper__arrow{
        left: 35px !important;
    }
    .fj_popover .item_title{
        border-radius: 8px;
        cursor: pointer;
        color: #191B1E;
        font-size: 14px;
        padding: 6px 8px;
    }
    .fj_popover .new_tag{
        border-radius: 4px;
        padding: 2px 4px;
        margin-left: 8px;
        background: #E0E9FF;
    }
    .fj_popover .item_title:hover{
        background: #F8F8F9;
    }
</style>
<style scoped>

/deep/ .el-input__icon{
    line-height: 32px;
}
/deep/ .el-input__inner {
   height: 32px !important;  /* 设置与父容器高度相等的 line-height */
   line-height: 32px !important;
   border-radius: 8px;
   /* width: 244px; */
}

/deep/ .el-dialog__body{
    position: relative;
    padding-bottom: 0 !important;
} 

/deep/ .el-dialog__footer{
    border-radius: 0px 0px 8px 8px;
    background: #FFF;
    box-shadow: 0px -3px 12px 0px rgba(111, 107, 107, 0.15);
}
.deldialog >>> .el-dialog__footer{
    box-shadow: none !important;
}

.ellipsis{
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.add-tag{
    margin-top: 12px;
    text-align: right;
}

.addgrouping{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 258px;
    /* margin-right: 12px; */
    line-height: 39px;
    padding: 8px 12px;
    background: #FFF;
    border-radius: 6px;
    border: 1px dashed #DCDEE2;
    cursor: pointer;
}

.grouping-list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
}

.line{
    width: 1px;
    height: 100%;
    background: #EBEBEB;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.left-header{
    width: 284px; 
}

.label-box{
    display: flex;
}

.left-label{
    margin-right: 20px;
}

.right-label{
    position: relative;
    margin-left: 20px;
}

.left-label,.right-label{
    flex: 1;
    height: 444px;
    overflow: auto;
}

.grouping-item{
    position: relative;
    cursor: pointer;
    display: flex;
    width: 110px;
    margin-top: 12px;
    padding: 8px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(165, 177, 209, 0.10);
}
.select-tips{
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    background: #E9EBF0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #616C85;
}
.grouping-item-active{
    border-radius: 6px;
    border: 1px solid var(---, #165DFF);
    background: rgba(22, 93, 255, 0.08);
}

 .grouping-item  p:nth-child(1){
    margin-bottom: 4px;
    color: #17233D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 112px;
 }

 .grouping-item p:nth-child(2){
    font-size: 12px;
    color: #616C85;
 }

/* .grouping-item:first-of-type {
    margin-top: 0 !important;
} */

.grouping-item:nth-of-type(odd) {
    margin-right: 12px;
}

.tag-list{
    display: flex;
    flex-wrap: wrap;
}

.tag-item{
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #EBEBEB;
    background: #FFF;
    padding: 4px 8px;
    margin: 12px 12px 0 0;
}
.tag-item-active{
    border-radius: 6px;
    background: rgba(22, 93, 255, 0.08);
    color: #165DFF;
    border-color: transparent;
}
.footer-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-left{
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-right: 12px;
    text-align: left;
}

.footer-box span {
    flex-shrink: 0;
}

.del_icon{
    border: 1px solid #D7DADE;
    border-radius: 8px;
    padding: 6px 7px;
    margin-left: 8px;
    cursor: pointer;
}
.del_icon:hover{
    background: #F8F8F9;
}
.del_icon_active{
    border-color: #5287FF !important;
    background: #E0E9FF !important;
}
</style>